<template>
  <div>
        <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区 -->
    <el-card>
        <!-- 提示区 -->
     <el-alert
    title="添加商品信息"
    type="info"
    center
    show-icon
    :closable="false">
  </el-alert>
  <!-- 步骤条 -->
  <el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center>
  <el-step title="基本信息"></el-step>
  <el-step title="商品步骤"></el-step>
  <el-step title="商品属性"></el-step>
  <el-step title="商品图片"></el-step>
  <el-step title="商品的内容"></el-step>
  <el-step title="完成"></el-step>
</el-steps>

<!-- tab栏区域 -->
<el-form ref="addFormRef" :model="addForm" label-width="100px" :rules="addFormRules" label-position="top">
  <el-tabs tab-position="left"  v-model="activeIndex" :before-leave="beforeTabLeave" @tab-click="tabClicked">
    <el-tab-pane label="基本信息" name="0">
       <el-form-item label="商品名称" prop="goods_name">
         <el-input v-model="addForm.goods_name"></el-input>
       </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
         <el-input v-model="addForm.goods_price" type="number"></el-input>
       </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
         <el-input v-model="addForm.goods_weight" type="number"></el-input>
       </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
         <el-input v-model="addForm.goods_number" type="number"></el-input>
       </el-form-item>
       <el-form-item label="商品分类" prop="goods_cate">
      <el-cascader
      expand-trigger="hover"
    v-model="addForm.goods_cate"
    :options="cateList"
    :props="cateProps"
    @change="handleChange"></el-cascader>
       </el-form-item>
      </el-tab-pane> 
    <el-tab-pane label="商品参数" name="1">
      <!-- 渲染表单的item项 -->
      <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
        <!-- 复选框组 -->
    <el-checkbox-group v-model="item.attr_vals">
    <el-checkbox :label="cb" v-for="(cb,i) in item.attr_vals" :key="i" border></el-checkbox>
  </el-checkbox-group>
        </el-form-item>
    </el-tab-pane>
    <el-tab-pane label="商品属性" name="2">
   <el-form-item v-for="item in onlyTableDate" :key="item.attr_id" :label="item.attr_name">
  <el-input v-model="item.attr_vals">

  </el-input>
   </el-form-item> 
    </el-tab-pane>
    <el-tab-pane label="商品图片" name="3">
      <!-- action 表示图片要上传到的后台api地址 -->
   <el-upload
   :action="uploadURL"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  list-type="picture"
  :headers="headerObj"
  :on-success="handleSuccess"
  >
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
    </el-tab-pane>
    <el-tab-pane label="商品内容" name="4">
      <!-- 富文本编辑器 -->
      <quill-editor v-model="addForm.goods_introduce">
      </quill-editor>
      <!-- 添加商品的内容 -->
      <el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
    </el-tab-pane>
  </el-tabs>
  </el-form>
        </el-card>
 <!-- 图片预览 -->
        <el-dialog
  title="图片预览"
  :visible.sync="previewVisible"
  width="50%"
  >  
     <img :src="previewPath" alt="" class="previewImg">
</el-dialog>
  </div>
</template>

<script>
import  _  from "lodash"
export default {
name:"Add",
data(){
    return{
       activeIndex:"0",
       //添加商品的表单数据对象
       addForm:{
         goods_name:"",
         goods_price:0,
         goods_weight:0,
         goods_number:0,
         //这是所属的分类数组
         goods_cate:[],
         //图片的数组
         pics:[],
         //商品的详情描述goods_introduce
         goods_introduce:"",
         attrs:[]
       },
       addFormRules:{
      goods_name:[
        {required:true,message:"请输入商品名称",trigger:"blur"}
      ],
      goods_price:[
          {required:true,message:"请输入商品价格",trigger:"blur"}
      ],
      goods_weight:[
        {required:true,message:"请输入商品重量",trigger:"blur"}
      ],
      goods_number:[
          {required:true,message:"请输入商品数量",trigger:"blur"}
      ],
      goods_cate:[
        {required:true,message:"请选择商品分类",trigger:"blur"}
      ]
       },
       //商品数据列表
       cateList:[], 
       cateProps:{
        //  页面显示的
         label:"cat_name",
        //  选中之后打出来的
         value:"cat_id",
        //  子属性
         children:"children"
       },
       //动态参数列表数据
       manyTableData:[],
       //静态属性列表数据
       onlyTableDate:[],
       //这是上传图片的url地址
       uploadURL:"http://127.0.0.1:8888/api/private/v1/upload",
       //图片上传组件的的header请求头对象 一定要手动设置请求头 因为他没有调用axios请求
       headerObj:{
        Authorization:window.sessionStorage.getItem("token")
       },
       previewPath:"",
       previewVisible:false
    }
},
created(){
  //获取所有商品分类数据
  this.getCateList()
},
methods:{
async getCateList(){
const {data:res} =   await this.$http.get('categories')
if(res.meta.status !==200){
  return this.$message.error("获取商品分类失败")
}
this.cateList= res.data
},
//级联选择器选中项变化,会触发这个函数
handleChange(){
  console.log(this.addForm.goods_cate)
  if(this.addForm.goods_cate.length!==3){
    this.addForm.goods_cate =[]
  }
},
beforeTabLeave(activeName,oldActiveName){
    //  console.log('即将离开的'+oldActiveName)
    //    console.log('即将进入的'+activeName)
    //    return false
    if(oldActiveName ==="0" && this.addForm.goods_cate.length!==3){
      this.$message.error("请先选择商品分类")
      return false
    }
},
async tabClicked(){
  //证明访问的是动态参数面板
 if(this.activeIndex ==="1"){
 const {data:res} =    await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:"many"}})
  if(res.meta.status!==200){
    this.$message.error("获取动态参数列表失败")
  }
  res.data.forEach(item=>{
 item.attr_vals =  item.attr_vals.length ===0 ? []:item.attr_vals.split(' ')
  })
    this.manyTableData= res.data
 }else if(this.activeIndex ==="2"){
const {data:res} =await    this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:"only"}})
  if(res.meta.status!==200){
    return this.$message.error("获取静态属性失败")
  }
  this.onlyTableDate= res.data
 }
},
//处理图片预览效果的
handlePreview(file){
  this.previewPath = file.response.data.url
  this.previewVisible = true
},
//处理移除图片的操作
handleRemove(file){
   //1.获取将要移除的图片数据路径
  const filePaht = file.response.data.tmp_path
   //2.从pics数组中找到这个图片的索引值
 const  i=   this.addForm.pics.findIndex(x=>{
     x.pic ===filePaht
   })
   //3.调用数组中的splice方法,把图片信息对象,从pics数组中移除 
   this.addForm.pics.splice(i,1)
   console.log(this.addForm) 
 },  
//监听图片上传成功的事件
handleSuccess(res){
 //1.拼接得到一个图片信息对象 //tmp_path这里放着零时路径
 const picInfo = {pic:res.data.tmp_path}
 //2.将图片信息对象,push到pics数组中
   this.addForm.pics.push(picInfo)
   console.log(this.addForm)
},
add(){
this.$refs.addFormRef.validate(async valid=>{
  if (!valid) {
    return this.$message.error("请填写必要的表单项!")
  } 
 //执行添加的业务逻辑 
 //lodash cloneDeep(obj)  //深拷贝 因为在tab 的v-model 是双向绑定的
 const  form= _.cloneDeep(this.addForm)
form.goods_cat =form.goods_cate.join(",")
//处理动态参数
this.manyTableData.forEach(item=>{
  const newInfo = {attr_id:item.attr_id,attr_value:item.attr_vals.join(" ")}
  this.addForm.attrs.push(newInfo)
})
//处理静态属性
this.onlyTableDate.forEach(item=>{
  const newInfo={
    attr_id:item.attr_id,
    attr_value:item.attr_vals
  }
  this.addForm.attrs.push(newInfo)
})
form.attrs =this.addForm.attrs
  
  //发起请求添加商品
  //商品的名称是唯一的
 const {data:res}=  await this.$http.post("goods",form)
 if(res.meta.status !==201){
   return this.$message.error("添加商品失败!")
 }
 this.$message.success("添加成功")
 this.$router.push("/goods",form)
})
}
},
computed:{
  cateId(){
    if(this.addForm.goods_cate.length===3){
      return this.addForm.goods_cate[2]
    }
    return null
  }
}
}
</script>

<style>
 .el-checkbox{
   margin: 0  10px 0!important;
  
 }
 .previewImg{
   width: 100%;
 }
 .btnAdd{
   margin-top: 15px !important;
 }
</style>